import React from 'react';
import style from './style.styl';
import cx from 'classnames';
import { Modal , Input} from '../../ui-components'; 
import util from '../../util';
import {IconButton, Button} from 'sq-ui';
import questionList from './questionList';

class TextField extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      isEdit: false,
    }
  }
  toggleEdit = (flag) => {
    this.setState({
      isEdit: flag,
    });
  }
  render() {
    const {
      item,
      value,
      canEdit
    } = this.props;
    return (
      <div className={style['detail-item']}>
        <label >{item.title} 
          {
            canEdit ? 
            <div className={style['detail-icon']}>
              <IconButton
                style={{ cursor: 'pointer',verticalAlign: 'middle'}}
                size="16"
                icon="edit"
                onClick={this.toggleEdit.bind(this, true)}
              />
            </div>
            : null
          }
          
        </label>
        {
          this.state.isEdit ? 
          (
            <div>
              <Input 
                width="100%"
                onChange={e => this.props.onChange(item.name, e.target.value)} 
                multi
                value={value}
                placeholder={item.placeholder}
              />
              <Button label={'保存'} blueLine style={{height: '30px'}} onClick={() => {this.toggleEdit(false);this.props.onSubmit && this.props.onSubmit(item.name);}} />
            </div>
          )
          : 
          <div>{value ? value.split(/\n{1}/).map((v, i) => <p key={i}>{v}</p>)  : '（未填写）'}</div>
        }
      </div>
    );
  }
} 

class RecordModal extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'RecordModal';
    this.state={
      showModal: false,
      changeField: {},
    }
  }
  handleSubmit = () => {
    this.props.handleSubmit && this.props.handleSubmit(this.props.recordItem.convrRecordId, this.state.changeField);
  }
  handleClose = () => {
    this.props.toggleModal(false);
  }
  handleInput = (name, value) => {
    this.setState({
      changeField: {
        ...this.state.changeField,
        [name]: value,
      }
    })
  }
  onSubmit = (name) => {
    this.props.handleSubmit && this.props.handleSubmit(this.props.recordItem.convrRecordId, {
      [name]: this.state.changeField[name]||''
    });
  }
  componentWillReceiveProps(props){
    if(props.showModal){
      
    }
  }
  render() {
    const {
      recordItem,
      sourceId,
    } = this.props;
    const {
      sourceUserProfileVO = {},
      targetUserProfileVO = {},
      convrDate = 0,
      overFlowHeight = document.querySelector('body').offsetHeight - 68,
    } = recordItem || {};
    // 判断是否能修改记录
    const canEdit = true; // sourceUserProfileVO.userId === sourceId;
    return (
      <div>
        <Modal
          active={this.props.showModal}
          onRequestClose={this.handleClose}
          title="交谈记录"
        >
          <div className={style['record-detail']} style={{overflowY:"scroll",height:overFlowHeight}} >
            <div>
              <div className={style['detail-field']}><label>发起人：</label>{sourceUserProfileVO.fullName}</div>
              <div className={style['detail-field']}><label>交谈对象：</label>{targetUserProfileVO.fullName}</div>
            </div>
            <div>
              <div className={style['detail-field']}><label>交谈日期：</label>{convrDate ? util.dateFormat(new Date(+convrDate), 'yyyy-MM-dd') : ''}</div>
            </div>
            <div className={style['item-page']}>
              {
                questionList.map((v, i) => {
                  const value = this.state.changeField[v.name] || recordItem[v.name];
                  return (
                    <TextField onSubmit={this.onSubmit} canEdit={canEdit} key={i} item={v} value={value} onChange={this.handleInput}/>
                  );
                })
              }
            </div> 
          </div> 
        </Modal>
      </div>
    );
  }
}

export default RecordModal;
